<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>北京自考社区网站-登录</title>

  <link href="/layui/css/layui.css" rel="stylesheet">

  <style>
    .my-login-bg {
      margin-top: 100px;
    }

    .my-login {
      padding-left: 15px;
      padding-right: 15px;
      margin-top: 40px;
      padding-top: 60px;
      height: 600px;
      border: 1px solid #f0f0f0;
    }

    .my-login h3 {
      text-align: center;
      margin-top: 60px;
      margin-bottom: 20px;
    }

    /* 自定义表单相关样式 */
    .my-form {
      margin-top: 60px;
    }

    .my-form-item {

      margin-top: 20px;
      margin-bottom: 20px;
    }

    .my-form-input {
      width: 100%;
      height: 12px;
      border: #cccccc solid 1px;
      padding: 16px;
      /* 避免input超出父div */
      box-sizing: border-box;
    }

    .my-form-btn {
      background: #00b7d3;
      width: 100%;
      height: 46px;
      border: none;
      color: white;
    }
    .my-login a{
      color: #2d8cf0;
      font-size: 12px;
      float: right;
    }
  </style>
</head>

<body>
<div class="layui-container">
  <div class="layui-row">
    <div class="layui-col-md8 my-login-bg"><img src="images/login-bg.png" /> </div>

    <div class="layui-col-md4 my-login">
      <h3>登录北京自考社区</h3>

      <form class="my-form">
        <div class="my-form-item">
          <input id="email" type="text" class="my-form-input" placeholder="请输入邮箱" />
        </div>
        <div class="my-form-item">
          <input id="pwd" type="password" class="my-form-input" placeholder="请输入密码" />
        </div>
        <div class="my-form-item">
          <input style="width: 40%;" id="verifyCode" type="text" class="my-form-input" placeholder="请输入验证码" />
          <img id="verifyCodeImg" src="/user/user/getVerifyCode">
        </div>
        <div class="my-form-item">
          <button id="submit" class="my-form-btn" type="button">登录</button>
        </div>
      </form>
      <a href="/registPage">新用户注册</a>
    </div>
  </div>
</div>
</body>
<script src="/jquery-3.5.1.js"></script>
<script src="/layui/layui.js"></script>
<script>
  layui.use('layer', function () {
    var layer = layui.layer;
    // 刷新验证码
    $(document).on('click', '#verifyCodeImg', function () {
      //选中img标签，将属性设置为验证码路径。一定要加随机数，否则会认为请求相同不做处理
      $("#verifyCodeImg").attr("src", "/user/user/getVerifyCode?" + Math.random());
    });

    // 登录
    $(document).on('click', '#submit', function () {
      // 一、获取表单数据
      var email = $("#email").val();
      var pwd = $("#pwd").val();
      var verifyCode = $("#verifyCode").val();

      // 校验数据
      if (email == '') {
        layer.open({
          type: 0,
          content: "用户邮箱不能为空，请输入用户邮箱"
        });
        return;
      }
      if (pwd == '') {
        layer.open({
          type: 0,
          content: "密码不能为空，请输入密码"
        });
        return;
      }
      if (verifyCode == '') {
        layer.open({
          type: 0,
          content: "验证码不能为空，请输入验证码"
        });
        return;
      }

      // 判断用户输入的是邮箱还是手机号码
      /*常用正则表达式
          a) 用户密码：/^[a-zA-Z][a-zA-Z0-9_]{5,20}$/
          b) 邮件:/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
          c) 手机:/^[\d]{5,20}$/
        */
      var checkEmail = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
      if (!checkEmail.test(email)) {
        layer.open({
          type: 0,
          content: "请输入正确的邮箱"
        });
        return;
      }

      // 二、登录
      var userData = {
        "email": email,
        "pwd": pwd,
        "verifyCode": verifyCode
      }
      jQuery.ajax({
        url: '/user/user/login',
        type: 'post',
        contentType: "application/json;charset=UTF-8",
        data: JSON.stringify(userData),
        success: function (obj) {
          if (obj.code == 200) {
            layer.open({
              type: 0,
              content: obj.msg,
              end: function () {
                window.location.href = '/index';
              }
            });
          } else {
            layer.open({
              type: 0,
              content: obj.msg
            });
          }
        }
      });
    });
  })
</script>

</html>